<template>
    <el-tabs type="border-card">
        <el-tab-pane label="查看排班">

            <div class="ban" >
                <el-calendar>
                    <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                    <template
                            class="day"
                            slot="dateCell" slot-scope="{date, data}">
                        <p>
                            {{ data.day.split('-').slice(1).join('-') }} <br>
                        </p>
                        <div :style="banStyle">{{dealMyDate(data.day)}}</div>
                    </template>
                </el-calendar>
            </div>
        </el-tab-pane>
<!--        <el-tab-pane label="查看出勤">-->






<!--        </el-tab-pane>-->
    </el-tabs>
</template>

<script>
    import axios from '../../http/http'
    import *as api from '../../http/api'
    import {mapActions, mapState} from 'vuex'

    export default {
        name: "j_cq",
        data(){
            return{
                isWork:false,
                banStyle:{
                    background: 'white',
                    color: 'blue',
                    margin:'8px auto',
                    width:'80px',
                    height:'40px',
                    lineHeight: '40px',
                },

            }
        },
        methods:{
            ...mapActions(['getpaibanData']),
            ceshi(){

            },
            //
            dealMyDate(v) {
                // console.log(v)
                let len = this.paibanData.length
                let res = ""
                for(let i=0; i<len; i++){
                    if(this.paibanData[i].date == v) {
                        res = this.paibanData[i].status
                        break
                    }
                }
                if(res==='假'){
                     this.banStyle.background='white'
                     this.banStyle.color='red'
                }else if(res==='早班'){
                    this.banStyle.background='green'
                    this.banStyle.color='white'
                }else if(res==='晚班'){
                    this.banStyle.background='blue'
                    this.banStyle.color='white'
                }
                return res
            }


        },
        computed:{
            ...mapState({//计算vuex里面的数据
                paibanData: function (state) {


                    return state.paibanStore.paibanData

                }

            }),


            // this.arr=riqi.sort(function(a,b){
            //     return a-b;  //降序排列，return a-b; —>升序排列
            // })


        },
        created() {
            this.getpaibanData()


        }
    }
</script>

<style lang="less" scoped>
    .ban{
        padding: 10px;
        width: 80%;

        margin: 0 auto;
        /*height: 400px;*/
        .el-calendar{
        }

    }
    .day{
        .zao{
            background: red;
            color: white;
            padding: 5px 0;
        }
        .wan{
            background: #55a532;
        }

    }
    .is-selected {
        color: #fa3d2e;
    }
    .paiban{
        padding: 5px;
        background: green;
        color: white;

    }

</style>